<template>
  <div class="register">
    <div class="content">
		<div class="areabox">
			<div class="public">
				<h3>立即注册，轻松接入流量变现</h3>
				<ul>
					<li><b class="re_01"></b><input name="" v-model="loginName" type="text" v-on="change(loginName)" placeholder="登陆时使用的邮箱，请确保可用"/></li>
					<li><b class="re_02"></b><input name="" v-model="password" type="password" placeholder="设置您的登陆密码，6-15位可包含数字及字母"/></li>
					<li><b class="re_03"></b><input name="" v-model="companyName" type="text" placeholder="请输入公司名称"/></li>
					<li><b class="re_04"></b><input name="" v-model="appName" type="text" placeholder="请输入应用名称"/></li>
					<li><b class="re_05"></b><input name="" v-model="mobile" type="" maxlength="11" placeholder="请输入手机号码，真实有效"/></li>
					<li class="pecul"><b class="re_06"></b><input name="" v-on:input="codeChange(userCode)" v-model="userCode" maxlength="4" type="text" placeholder="请输入验证码"/>
						<div class="code" @click="createCode">{{code}}</div>
            <p class="codeTxt" v-if="!isTureCode">验证码错误</p>
					</li>
					<li class="pecul"><b class="re_07"></b><input name="" v-model="smsCode" type="text" placeholder="请输入短信验证码"/>
            <a href="javascript:;" class="btn_org" v-if="!isgetSmsCode" @click="getSmsCode(mobile)">
              获取验证码
            </a>
            <a href="javascript:;" v-if="isgetSmsCode" class="btn_ashy">{{countDown}}秒后重发</a>
          </li>
				</ul>
				<a href="javascript:;" class="btn_org"  @click="submit">提交注册</a>
			</div>
		</div>
	</div>
  </div>
</template>
<script>
import commonJs from "@/common/js/common";
export default {
  name: "register",
  data() {
    return {
      code: "",
      loginName: "",
      password: "",
      companyName: "",
      appName: "",
      mobile: "",
      userCode: "",
      isTureCode: true,
      noteCode: "",
      smsCode: "",
      isgetSmsCode: false,
      countDown: 60,
      timer: null,
      isEmail: null
    };
  },
  mounted() {
    this.createCode();
  },
  methods: {
    change(loginName) {
      this.checkEmail(loginName);
    },
    checkEmail(str) {
      var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (re.test(str)) {
        return (this.isEmail = true);
      } else {
        return (this.isEmail = false);
      }
    },
    //随机二维码
    createCode() {
      let codeLength = 4;
      this.code = "";
      const random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ); //随机数
      for (let i = 0; i < codeLength; i++) {
        //循环操作
        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        this.code += random[index]; //根据索引取得随机数加到code上
      }
    },
    codeChange(userCode) {
      this.isTureCode = userCode.toUpperCase() == this.code;
    },
    //获取短信验证码
    getSmsCode(mobile) {
      let timer = null;
      if (mobile == "" || !this.isTureCode || !this.userCode) {
        this.$message({
          type: "warning",
          message: "您的手机号或验证码填写有误！"
        });
        return;
      }
      this.isgetSmsCode = true;
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/smscode/verify.do",
        data: `mobile=${mobile}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: res.data.message
            });
            if (!this.timer) {
              this.timer = setInterval(() => {
                if (this.countDown > 0) {
                  this.isgetSmsCode = true;
                  this.countDown--;
                } else {
                  this.isgetSmsCode = false;
                  this.countDown = 60;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            message: " 网络错误，请稍后再试！",
            message: res.data.message
          });
        });
    },
    //提交
    submit() {
      console.log();
      if (!this.userCode || !this.isTureCode) {
        this.$message({
          type: "warning",
          message: "您的信息填写有误！"
        });
        return;
      }
      if (!this.isEmail) {
        this.$message({
          type: "warning",
          message: "您的邮箱格式不正确！"
        });
        return;
      }

      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/developer/add.do",
        data: `loginName=${this.loginName}&password=${
          this.password
        }&companyName=${this.companyName}&appName=${this.appName}&mobile=${
          this.mobile
        }&smsCode=${this.smsCode}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: res.data.message
            });
            this.$router.push({ path: "/login", query: { type: 1 } });
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            message: " 网络错误，请稍后再试！",
            type: "warning"
          });
        });
    }
  },
  watch: {
    // loginName: function(val) {
    //   checkEmail(val);
    //   function checkEmail(str) {
    //     var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    //     if (re.test(str)) {
    //       console.log(1);
    //     } else {
    //       console.log(0);
    //       // console.log(this.countDown);
    //     }
    //   }
    // }
  }
};
</script>
<style scoped>
.code {
  background: lightgray;
  font-size: 25px;
  text-align: center;
  color: #fa8b00;
  cursor: pointer;
}
.codeTxt {
  color: red;
  position: relative;
  left: 340px;
  top: 25px;
}
</style>
